<template>
    <q-header reveal bordered v-model="headerState">
        <q-toolbar class="min-h-[40px]!">
            <q-btn dense round flat :icon="store.a.侧栏折叠 ? 'menu_open' : 'menu'"
                @click="store.a.侧栏折叠 = !store.a.侧栏折叠" />
            <q-avatar size="40px" color="teal" text-color="white" icon="directions" />
            <q-toolbar-title shrink class="text-bold text-italic cursor-pointer" style="padding: 0 5px;">
                老鱼vue
            </q-toolbar-title>

            <q-separator vertical inset spaced />

            <q-breadcrumbs style="margin-left: 20px;">
                <!-- <q-breadcrumbs-el :label="selectOptionLabel(findCurrentTopMenu)" :icon="findCurrentTopMenu?.icon"
                    :class="darkTheme" /> -->
                <q-breadcrumbs-el :label="route.meta.title" :icon="route.meta.icon" />
            </q-breadcrumbs>

            <q-space />

            <div class="q-gutter-sm row items-center no-wrap">
                <q-btn dense round flat :icon="$q.fullscreen.isActive ? 'las la-compress' : 'ion-ios-qr-scanner'"
                    @click="$q.fullscreen.toggle()">
                </q-btn>
            </div>
        </q-toolbar>
    </q-header>
</template>

<script setup>
import { ref, computed, watch, onMounted, inject } from 'vue';
import useStore from '@/stores/store';
const store = useStore()
import { useRoute } from 'vue-router';
import { useQuasar } from 'quasar';
const $q = useQuasar();
const route = useRoute();
const headerState = ref(true);

</script>

<style scoped lang="scss"></style>
